<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import ApplyCard from "@/views/Activity/AI+XTrainingCamp/components/ApplyCard/index.vue";
import { getIcon } from "@/api/assets/assets";
import { useRouter } from "vue-router";

const router = useRouter()

const logo1 = ref<string | undefined>(undefined)
const logo2 = ref<string | undefined>(undefined)
const logo3 = ref<string | undefined>(undefined)
const logo4 = ref<string | undefined>(undefined)
const logo5 = ref<string | undefined>(undefined)
const logo6 = ref<string | undefined>(undefined)

const fetchIcon = async () => {
  try {
    const data = await getIcon([
      '143.png',
      '144.png',
      '145.png',
      '146.png',
      '148.png',
      '150.png',
    ]);
    logo1.value = data['143.png'];
    logo2.value = data['144.png'];
    logo3.value = data['145.png'];
    logo4.value = data['146.png'];
    logo5.value = data['148.png'];
    logo6.value = data['150.png'];
  }
  catch (error) {
    console.error('API 调用错误:', error);
  }
};

onMounted(() => {
  fetchIcon();
});

// 使用ant-design-vue的Card, Row, Col组件

// 示例数据
const data = computed(() => [
  {
    title: "双创广场",
    count: "500+",
    description: "集成各类优质项目500+",
    icon: logo1.value,
    style: "innovationCard",
    path: "/user/innovation/project",
  },
  {
    title: "模型广场",
    count: "100+",
    description: "集成10+家厂商模型共100+",
    icon: logo2.value,
    style: "modelCard",
    path: "/user/model",
  },
  {
    title: "数据广场",
    count: "7000+",
    description: "集成开源数据7000+",
    icon: logo3.value,
    style: "dataCard",
    path: "/user/data",
  },
  {
    title: "应用广场",
    count: "1100+",
    description: "集成应用1100+",
    icon: logo4.value,
    style: "applicationCard",
    path: "/user/application/dev-space",
  },
  {
    title: "组件广场",
    count: "100+",
    description: "集成20+类型组件共100+",
    icon: logo5.value,
    style: "componentCard",
    path: "/user/practice",
  },
  {
    title: "学习广场",
    count: "90+",
    description: "集成多模态学习资料90+",
    icon: logo6.value,
    style: "learningCard",
    path: "/user/learningNew/skill-tree",
  },
]);

const handleCardClick = (item: any) => {
  router.push(item.path)
}
</script>

<template>
  <a-layout class="home-layout w-full h-full">
    <a-layout-content class="flex flex-col h-full">
      <!-- 固定区域 -->
      <div class="flex-none">
        <!-- 训练营标题 -->
        <div class="flex mx-4 my-2">
          <a-breadcrumb class="text-3xl font-bold flex items-center gap-2">
            <a-breadcrumb-item class="flex items-center relative">
              “AI+X”大模型创新训练营
              <img
                src="@/assets/title_star.svg"
                alt="大模型创新训练营"
                class="w-6 h-6 absolute -right-6"
              >
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>

        <!-- 训练营卡片 -->
        <div class="px-4">
          <ApplyCard
            title="“AI+X”大模型创新训练营"
            description="训练以“智能赋能，创新引领”为主题，鼓励参赛者结合自身专业知识和创新思维，运用并考量大模型技术和特定行业需求，打造具有应用价值或技术突破的智能应用。"
            range="2024/09/25 - 2024/11/30"
            organizer="举办方：北京邮电大学叶培大创新创业学院、智链iLink开发团队"
            :show-detail="true"
          />
        </div>

        <!-- 首页标题 -->
        <div class="flex mx-4 my-2">
          <a-breadcrumb class="text-3xl font-bold flex items-center gap-2">
            <a-breadcrumb-item class="flex items-center relative">
              首页
              <img
                src="@/assets/title_star.svg"
                alt="首页"
                class="w-6 h-6 absolute -right-6"
              >
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>
      </div>

      <!-- 卡片网格区域 - 独立滚动 -->
      <div class="flex-1 min-h-0">
        <!-- min-h-0 很重要，让 flex-1 正常工作 -->
        <div class="h-full overflow-auto">
          <a-row
            :gutter="[0, 24]"
            justify="space-evenly"
            class="px-4 md:px-6"
          >
            <a-col
              v-for="(item, index) in data"
              :key="index"
              :xxl="7"
              :xl="7"
              :lg="10"
              :md="10"
              :sm="20"
              :xs="20"
            >
              <a-card
                class="transform transition-all duration-300 hover:shadow-lg hover:scale-[1.02] bg-white rounded-lg overflow-hidden cursor-pointer" :class="[
                  item.style,
                ]"
                @click="handleCardClick(item)"
              >
                <div class="flex items-center p-4 cursor-pointer">
                  <img
                    :src="item.icon"
                    alt="icon"
                    class="w-16 h-16 object-contain flex-shrink-0"
                  >
                  <div class="flex flex-col ml-8">
                    <h3 class="text-2xl font-medium mb-6 text-white">
                      {{ item.title }}
                    </h3>
                    <div class="text-base text-white">
                      集成
                      <span class="text-2xl font-semibold ml-1">
                        {{ item.count }}
                      </span>
                      项
                    </div>
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<style scoped>
.home-layout {
  background-color: transparent;
}

.modelCard {
  background-color: #5fa4fd;
}

.dataCard {
  background-color: #56cede;
}

.learningCard {
  background-color: #23a0f4;
}

.componentCard {
  background-color: #46b9d0;
}

.applicationCard {
  background-color: #40ceba;
}

.innovationCard {
  background-color: #6374fa;
}
</style>
